{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Renderer properties"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from pythreejs import *\n",
    "from IPython.display import display\n",
    "import ipywidgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Reduce repo churn for examples with embedded state:\n",
    "from pythreejs._example_helper import use_example_model_ids\n",
    "use_example_model_ids()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Transparent background\n",
    "\n",
    "To have the render view use a transparent background, there are three steps you need to do:\n",
    "1. Ensure that the `background` property of the `Scene` object is set to `None`.\n",
    "2. Ensure that `alpha=True` is passed to the constructor of the `Renderer` object. This ensures that an alpha channel is used by the renderer.\n",
    "3. Ensure that the `clearOpacity` property of the `Renderer` object is set to 0. For more details about this, see below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "pythree_example_model_009",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Renderer(camera=PerspectiveCamera(children=(DirectionalLight(color='white', intensity=0.5, position=(3.0, 5.0,…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "ball = Mesh(geometry=SphereGeometry(), \n",
    "            material=MeshLambertMaterial(color='red'))\n",
    "key_light = DirectionalLight(color='white', position=[3, 5, 1], intensity=0.5)\n",
    "\n",
    "c = PerspectiveCamera(position=[0, 5, 5], up=[0, 1, 0], children=[key_light])\n",
    "\n",
    "scene = Scene(children=[ball, c, AmbientLight(color='#777777')], background=None)\n",
    "\n",
    "renderer = Renderer(camera=c, \n",
    "                    scene=scene,\n",
    "                    alpha=True,\n",
    "                    clearOpacity=0,\n",
    "                    controls=[OrbitControls(controlling=c)])\n",
    "display(renderer)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The use of clear color/opacity is explained in more detailed in the docs of three.js, but in short:\n",
    "- If `autoClear` is true the renderer output is cleared on each rendered frame.\n",
    "- If `autoClearColor` is true the background color is cleared on each frame.\n",
    "- When the background color is cleared, it is reset to `Renderer.clearColor`, with an opacity of `Renderer.clearOpacity`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "pythree_example_model_029",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Label(value='Clear color:'), ColorPicker(value='black'), Label(value='Clear opactiy:'), FloatSl…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Let's set up some controls for the clear color/opacity:\n",
    "\n",
    "opacity = ipywidgets.FloatSlider(min=0., max=1.)\n",
    "ipywidgets.jslink((opacity, 'value'), (renderer, 'clearOpacity'))\n",
    "\n",
    "color = ipywidgets.ColorPicker()\n",
    "ipywidgets.jslink((color, 'value'), (renderer, 'clearColor'))\n",
    "\n",
    "display(ipywidgets.HBox(children=[\n",
    "    ipywidgets.Label('Clear color:'), color, ipywidgets.Label('Clear opactiy:'), opacity]))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Scene background\n",
    "\n",
    "If we set the background property of the scene, it will be filled in on top of whatever clear color is there, basically making the clear color ineffective."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "pythree_example_model_040",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Label(value='Scene background color:'), ColorPicker(value='black'), ToggleButton(value=False, d…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "scene_background = ipywidgets.ColorPicker()\n",
    "_background_link = None\n",
    "\n",
    "def toggle_scene_background(change):\n",
    "    global _background_link\n",
    "    if change['new']:\n",
    "        _background_link = ipywidgets.jslink((scene_background, 'value'), (scene, 'background'))\n",
    "    else:\n",
    "        _background_link.close()\n",
    "        _background_link = None\n",
    "        scene.background = None\n",
    "\n",
    "scene_background_toggle = ipywidgets.ToggleButton(False, description='Scene Color')\n",
    "scene_background_toggle.observe(toggle_scene_background, 'value')\n",
    "\n",
    "display(ipywidgets.HBox(children=[\n",
    "    ipywidgets.Label('Scene background color:'), scene_background, scene_background_toggle]))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.6"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "20dd14fe-5613-423c-bf5a-f2131033c4f2": {
      "model_module": "jupyter-threejs",
      "model_module_version": "2.0.0",
      "model_name": "Object3DModel",
      "state": {}
     },
     "29e8caf5-30b3-4165-ac95-c84079b83375": {
      "model_module": "jupyter-threejs",
      "model_module_version": "2.0.0",
      "model_name": "OrthographicCameraModel",
      "state": {
       "bottom": -5,
       "far": 500,
       "left": -5,
       "near": 0.5,
       "projectionMatrix": [
        0.2,
        0,
        0,
        0,
        0,
        0.2,
        0,
        0,
        0,
        0,
        -0.004004004004004004,
        0,
        0,
        0,
        -1.002002002002002,
        1
       ],
       "right": 5,
       "top": 5
      }
     },
     "c30e2bbc-a155-4f51-8ff9-92009d762f5b": {
      "model_module": "jupyter-threejs",
      "model_module_version": "2.0.0",
      "model_name": "DirectionalLightShadowModel",
      "state": {
       "camera": "IPY_MODEL_29e8caf5-30b3-4165-ac95-c84079b83375"
      }
     },
     "pythree_example_model_001": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "SphereGeometryModel",
      "state": {
       "_model_module_version": "^2.0.0",
       "_view_module": null,
       "_view_module_version": ""
      }
     },
     "pythree_example_model_002": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "MeshLambertMaterialModel",
      "state": {
       "_model_module_version": "^2.0.0",
       "_view_module": null,
       "_view_module_version": "",
       "color": "red"
      }
     },
     "pythree_example_model_003": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "MeshModel",
      "state": {
       "_model_module_version": "^2.0.0",
       "_view_module": null,
       "_view_module_version": "",
       "geometry": "IPY_MODEL_pythree_example_model_001",
       "material": "IPY_MODEL_pythree_example_model_002",
       "morphTargetInfluences": []
      }
     },
     "pythree_example_model_004": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "DirectionalLightModel",
      "state": {
       "_model_module_version": "^2.0.0",
       "_view_module": null,
       "_view_module_version": "",
       "color": "white",
       "intensity": 0.5,
       "matrixWorldNeedsUpdate": true,
       "position": [
        3,
        5,
        1
       ],
       "shadow": "IPY_MODEL_c30e2bbc-a155-4f51-8ff9-92009d762f5b",
       "target": "IPY_MODEL_20dd14fe-5613-423c-bf5a-f2131033c4f2"
      }
     },
     "pythree_example_model_005": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "PerspectiveCameraModel",
      "state": {
       "_model_module_version": "^2.0.0",
       "_view_module": null,
       "_view_module_version": "",
       "children": [
        "IPY_MODEL_pythree_example_model_004"
       ],
       "matrix": [
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        5,
        5,
        1
       ],
       "position": [
        0,
        5,
        5
       ],
       "projectionMatrix": [
        2.1445069205095586,
        0,
        0,
        0,
        0,
        2.1445069205095586,
        0,
        0,
        0,
        0,
        -1.00010000500025,
        -1,
        0,
        0,
        -0.200010000500025,
        0
       ]
      }
     },
     "pythree_example_model_006": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "AmbientLightModel",
      "state": {
       "_model_module_version": "^2.0.0",
       "_view_module": null,
       "_view_module_version": "",
       "color": "#777777"
      }
     },
     "pythree_example_model_007": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "SceneModel",
      "state": {
       "_model_module_version": "^2.0.0",
       "_view_module": null,
       "_view_module_version": "",
       "background": null,
       "children": [
        "IPY_MODEL_pythree_example_model_003",
        "IPY_MODEL_pythree_example_model_005",
        "IPY_MODEL_pythree_example_model_006"
       ]
      }
     },
     "pythree_example_model_008": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "OrbitControlsModel",
      "state": {
       "_model_module_version": "^2.0.0",
       "_view_module": null,
       "_view_module_version": "",
       "controlling": "IPY_MODEL_pythree_example_model_005",
       "maxAzimuthAngle": "inf",
       "maxDistance": "inf",
       "maxZoom": "inf",
       "minAzimuthAngle": "-inf"
      }
     },
     "pythree_example_model_009": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "RendererModel",
      "state": {
       "_alpha": true,
       "_model_module_version": "^2.0.0",
       "_view_module_version": "^2.0.0",
       "camera": "IPY_MODEL_pythree_example_model_005",
       "clearColor": "black",
       "clearOpacity": 0,
       "controls": [
        "IPY_MODEL_pythree_example_model_008"
       ],
       "layout": "IPY_MODEL_pythree_example_model_010",
       "scene": "IPY_MODEL_pythree_example_model_007",
       "shadowMap": "IPY_MODEL_pythree_example_model_011"
      }
     },
     "pythree_example_model_010": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "pythree_example_model_011": {
      "model_module": "jupyter-threejs",
      "model_module_version": "^2.0.0",
      "model_name": "WebGLShadowMapModel",
      "state": {
       "_model_module_version": "^2.0.0",
       "_view_module": null,
       "_view_module_version": ""
      }
     },
     "pythree_example_model_015": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "FloatSliderModel",
      "state": {
       "layout": "IPY_MODEL_pythree_example_model_016",
       "max": 1,
       "step": 0.1,
       "style": "IPY_MODEL_pythree_example_model_017"
      }
     },
     "pythree_example_model_016": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "pythree_example_model_017": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "pythree_example_model_018": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "LinkModel",
      "state": {
       "source": [
        "IPY_MODEL_pythree_example_model_015",
        "value"
       ],
       "target": [
        "IPY_MODEL_pythree_example_model_009",
        "clearOpacity"
       ]
      }
     },
     "pythree_example_model_019": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "ColorPickerModel",
      "state": {
       "disabled": false,
       "layout": "IPY_MODEL_pythree_example_model_020",
       "style": "IPY_MODEL_pythree_example_model_021"
      }
     },
     "pythree_example_model_020": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "pythree_example_model_021": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "pythree_example_model_022": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "LinkModel",
      "state": {
       "source": [
        "IPY_MODEL_pythree_example_model_019",
        "value"
       ],
       "target": [
        "IPY_MODEL_pythree_example_model_009",
        "clearColor"
       ]
      }
     },
     "pythree_example_model_023": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "LabelModel",
      "state": {
       "layout": "IPY_MODEL_pythree_example_model_024",
       "style": "IPY_MODEL_pythree_example_model_025",
       "value": "Clear color:"
      }
     },
     "pythree_example_model_024": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "pythree_example_model_025": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "pythree_example_model_026": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "LabelModel",
      "state": {
       "layout": "IPY_MODEL_pythree_example_model_027",
       "style": "IPY_MODEL_pythree_example_model_028",
       "value": "Clear opactiy:"
      }
     },
     "pythree_example_model_027": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "pythree_example_model_028": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "pythree_example_model_029": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "HBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_pythree_example_model_023",
        "IPY_MODEL_pythree_example_model_019",
        "IPY_MODEL_pythree_example_model_026",
        "IPY_MODEL_pythree_example_model_015"
       ],
       "layout": "IPY_MODEL_pythree_example_model_030"
      }
     },
     "pythree_example_model_030": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "pythree_example_model_031": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "ColorPickerModel",
      "state": {
       "disabled": false,
       "layout": "IPY_MODEL_pythree_example_model_032",
       "style": "IPY_MODEL_pythree_example_model_033"
      }
     },
     "pythree_example_model_032": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "pythree_example_model_033": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "pythree_example_model_034": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "ToggleButtonModel",
      "state": {
       "description": "Scene Color",
       "layout": "IPY_MODEL_pythree_example_model_035",
       "style": "IPY_MODEL_pythree_example_model_036"
      }
     },
     "pythree_example_model_035": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "pythree_example_model_036": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "pythree_example_model_037": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "LabelModel",
      "state": {
       "layout": "IPY_MODEL_pythree_example_model_038",
       "style": "IPY_MODEL_pythree_example_model_039",
       "value": "Scene background color:"
      }
     },
     "pythree_example_model_038": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "pythree_example_model_039": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "pythree_example_model_040": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.3.0",
      "model_name": "HBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_pythree_example_model_037",
        "IPY_MODEL_pythree_example_model_031",
        "IPY_MODEL_pythree_example_model_034"
       ],
       "layout": "IPY_MODEL_pythree_example_model_041"
      }
     },
     "pythree_example_model_041": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.1.0",
      "model_name": "LayoutModel",
      "state": {}
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
